<template>
  <div class="page-container">

    <div class="page-main" v-if="type == 1" ref="dataScreenRef">
      <dv-decoration-12 class="auto-ani" />
      <div class="circle-light light-1"></div>
      <div class="circle-light light-2"></div>
      <div class="circle-light light-3"></div>
      <div class="circle-light light-4"></div>
      <div class="content">
        <div class="title">{{ title }}</div>
        <dv-decoration-5 :dur="2" class="title-line" />
        <slot />
      </div>
    </div>
    <div class="page-main" v-if="type == 2" ref="dataScreenRef" :style="{
      backgroundImage: `url(${require('../assets/bj.png')})`
    }">
      <div class="content">
        <dv-decoration-12 class="auto-ani" />
        <img class="top-bg" src="../assets//top.png" alt="">
        <div class="title title-2" :style="{ fontSize: fontSize + 'px' }">
          <span class="time">2023/01/01——2024/02/13</span>
          <span class="ctx">{{ title }}</span>
          <span class="time">{{time}}</span>
        </div>
        <slot />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AutoPage",
  props: {
    type: {
      type: Number,
      default: 1
    },
    title: {
      type: String,
      default: '',
    },
    fontSize: {
      type: Number,
      default: 36,
    },
  },
  data() {
    return {
      width: 1920,
      height: 1080,
      time: this.getCurrentTime(),
    };
  },
  mounted() {
    if (this.$refs.dataScreenRef) {
      this.$refs.dataScreenRef.style.transform = `scale(${this.getScale()})`;
      this.$refs.dataScreenRef.style.width = `${this.width}px`;
      this.$refs.dataScreenRef.style.height = `${this.height}px`;
      this.$refs.dataScreenRef.style.margin = `0 0 0 ${(this.$el.offsetWidth - this.getScale() * this.width) / 2
        }px`;
      this.$emit("getScale", this.getScale());
    }
    const observer = new ResizeObserver(() => {
      this.resize();
    });
    observer.observe(this.$el);
    // 通过帧渲染来实现定时器，避免使用setInterval造成的性能问题
    this.setTime()
  },
  methods: {
    getCurrentTime() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hour = date.getHours();
      let minute = date.getMinutes();
      let second = date.getSeconds();
      let week = date.getDay();
      switch (week) {
        case 0:
          week = "星期天";
          break;
        case 1:
          week = "星期一";
          break;
        case 2:
          week = "星期二";
          break;
        case 3:
          week = "星期三";
          break;
        case 4:
          week = "星期四";
          break;
        case 5:
          week = "星期五";
          break;
        case 6:
          week = "星期六";
          break;
      }
      return `${year}年${month}月${day}日 ${hour}:${minute}:${second} ${week}`;
    },
    setTime() {
      requestAnimationFrame(() => {
        this.time = this.getCurrentTime();
        this.setTime();
      });
    },
    getScale(w = this.width, h = this.height) {
      let ww = this.$el.offsetWidth / w;
      let wh = this.$el.offsetHeight / h;
      return ww < wh ? ww : wh;
    },
    resize() {
      if (this.$refs.dataScreenRef) {
        this.$refs.dataScreenRef.style.transform = `scale(${this.getScale()})`;
        this.$refs.dataScreenRef.style.margin = `0 0 0 ${(this.$el.offsetWidth - this.getScale() * this.width) / 2
          }px`;
        this.$emit("getScale", this.getScale());
      }
    },
  },
};
</script>

<style scoped lang="less">
.page-container {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background: #021730;

}

.page-main {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 99;
  top: 0;
  left: 0;
  background-image: url(../assets/bg.png);
  transform-origin: top left;
  display: flex;
  flex-direction: column;
  background-repeat: no-repeat;
  background-size: contain;
}

.page-main .content {
  flex: 1;
  background-position: center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;

  .top-bg {
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
  }

  .title {
    width: 100%;
    height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: 400;
    color: #FFFFFF;
    letter-spacing: 8px;
  }

  .title-2 {
    font-size: 36px;
    letter-spacing: 1px;
    font-weight: bold;
    position: relative;
    z-index: 99;
    padding: 0 48px 24px;

    .time {
      font-size: 20px;
      color: #60D4EF;
      width: 400px;

      &:last-child {
        text-align: right;
      }
    }

    .ctx {
      flex: 1;
      display: flex;
      justify-content: center;
      margin: 5px 0 0;
    }
  }
}

#container {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
}

.auto-ani {
  width: 40%;
  position: absolute;
  z-index: 0;
  opacity: 0.1;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}

.circle-light {
  width: 200px;
  height: 200px;
  background: #fff;
  border: 10px dashed;
  border-left-color: #6d75df;
  border-top-color: #a6aae5;
  border-right-color: #767eeb;
  border-bottom-color: #606aef;
  position: absolute;
  border-radius: 50%;
  background: transparent;
  animation: scroll 15s linear;
  animation-iteration-count: infinite;
  opacity: .2;
  box-shadow: 0 0 50px 5px #6d75df, 0 0 30px 5px #767eeb inset;
}

.light-1 {
  left: 150px;
  top: 150px;
  border-width: 13px;
}

.light-2 {
  right: 150px;
  top: 150px;
  border-left-color: #66a0c2;
  border-top-color: #328cc0;
  border-right-color: #8fb6cc;
  border-bottom-color: #3d7fa5;
  width: 200px;
  height: 200px;
  border-width: 12px;
}

.light-3 {
  left: 250px;
  bottom: 180px;
  width: 150px;
  height: 150px;
  border-left-color: #66a0c2;
  border-top-color: #328cc0;
  border-right-color: #8fb6cc;
  border-bottom-color: #3d7fa5;
}

.light-4 {
  right: 250px;
  bottom: 180px;
  width: 150px;
  height: 150px;
  border-width: 10px;
}

@keyframes scroll {
  from {
    transform: rotateZ(0);
  }

  to {
    transform: rotateZ(360deg);
  }
}

.title-line {
  width: 50%;
  height: 110px;
  position: absolute;
  left: 25%;
  top: 20px;
}
</style>